<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery DOM 1</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#div1').html(); // 获取元素中HTML内容, 结果为<strong>Hello<strong>
				$('#div2').html('<em>World</em>'); //设置元素中HTML内容, 有HTML标签会自动解析, 结果为斜体的World

				$('#div1').text(); // 获取元素中文本内容, 自动清理HTML标签, 结果为Hello
				$('#div3').text('<em>World</em>'); //设置元素的文本内容, 有HTML标签会自动转义, 结果为<em>World</em> 
				// 当我们使用html()或text()设置元素里的内容时, 会清空原来的数据, 如果期望能够追加数据的话, 需要先获取原本的数据
				
				var text1 = $('#input1').val(); // 获取表单中的文本内容
				$('#input2').val(text1); // 设置表单中的文本内容
				
				// 使用数组传递需要选定的选项值可以一次性设置多个选项的选定状态
				$('input[type!=text]').val(['level2','男']);
				
				// attr(key, value)设置元素的属性
				$('#div2').attr('title', 'My Div Title');
				// attr(key)获取元素的属性值
				$('#div2').attr('title');
				// attr({key1:value2, key2:value2...})设置某个元素多个key属性的属性值
				$('#div3').attr({
					'title':'My Another Div',
					'data':'My Data'
					});
				
				// 使用function设置key值
				// function可以含有两个参数 index(表示当前元素的索引, 从0开始), value(表示属性原本的值)
				$('div').attr('title', function(index, value){
					return '原来的title为: ' + value + ', 现在的title为: title ' + (index + 1) ;
				});
				// jQuery中很多方法都可以使用function(){}来返回出字符串, 比如html(), text(), val(), is(), filter()等方法
				// removeAttr不可以使用匿名函数, 传递index和value均无效
			});	
		</script>
		</head>
	<body>
		<div id="div1">
			<strong>Hello</strong>
		</div>
		
		<div id="div2"></div>
		 
		<div id="div3"></div>
		
		<form action="">
			<input id="input1" type="text" value="Clouds over the head" />
			<input id="input2" type="text" value="" /><br/>
			
			<input id="radio1" type="radio" name="gender" value="男"/>男&nbsp;&nbsp;
			<input id="radio2" type="radio" name="gender" value="女"/>女<br/>
			<input id="ck1" type="checkbox" name="level1" value="level1"/> Level 1&nbsp;&nbsp;
			<input id="ck2" type="checkbox" name="level2" value="level2"/> Level 2&nbsp;&nbsp;
			<input id="ck3" type="checkbox" name="level3" value="level3"/> Level 3&nbsp;&nbsp;
			
			
		</form>
	</body>
</html>